import React, { Component } from 'react'
import { Card } from 'react-bootstrap'
import intl from 'react-intl-universal'
import { withRouter } from 'react-router-dom'
import './ProductItem.less'

class ProductItem extends Component {
  state = { flag: false }

  componentDidMount () {
    const { goods } = this.props
    const newCN = {
      [goods.enTitle]: goods.zhTitle,
      [goods.enDescription]: goods.zhDescription,
      [goods.enPrice]: goods.zhPrice
    }
    const newEN = {
      [goods.enTitle]: goods.enTitle,
      [goods.enDescription]: goods.enDescription,
      [goods.enPrice]: goods.enPrice
    }
    intl.load({
      'zh-CN': newCN,
      'en-US': newEN
    })
    this.setState({ flag: true })
  }

  handleGoodsClick = () => {
    const { history, goods } = this.props
    history.push(`/goodsDetail/${goods._id}`)
  }

  render () {
    const { goods } = this.props
    return (
      this.state.flag ? <div id = {'product-item'}
                             onClick = {this.handleGoodsClick}>
        <Card>
          <Card.Img variant = "top" src = {goods.img[0]} />
          <Card.Body>
            <Card.Title className = {'title'}>{intl.get(
              goods.enTitle)}</Card.Title>
            <Card.Text className = {'text'}>
              {intl.get(goods.enDescription)}
            </Card.Text>
            <Card.Text as = {'h4'}>
              {intl.get('$')}{intl.get(goods.enPrice)}
            </Card.Text>
          </Card.Body>
        </Card>
      </div> : ''
    )
  }
}

export default withRouter(ProductItem)
